<template>
  <view class="container">
    <view class="info-list">
      <view class="info-item">
        <view class="contacts avatar-warp">
          <text class="name">头像</text>
          <image class="avatar" @click="chooseImage()" :src="avatar"></image>
        </view>
      </view>
      <view class="info-item">
        <view class="contacts">
          <text class="name">称呼</text>
          <input
            class="weui-input value"
            type="nickname"
            @blur="getnickname"
            v-model="nickname"
            placeholder="请输入称呼"
          />
        </view>
      </view>
      <view class="info-item">
        <view class="contacts">
          <text class="name">手机</text>
          <button
            class="button btn-normal value"
            open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber"
          >
            <text v-if="userInfo.mobile">{{ userInfo.mobile }}</text>
            <text style="color: #f9211c; margin-left: 2px">更换</text>
          </button>
        </view>
      </view>
      <view class="info-item">
        <view class="contacts">
          <text class="name">密码</text>
          <button class="button btn-normal value" @click="changePassword">
            <text class="password">********</text>
            <text style="color: #f9211c; margin-left: 2px">修改</text>
          </button>
        </view>
      </view>
      <view class="info-item">
        <view class="contacts">
          <text class="name">性别</text>
          <view class="value">
            <radio-group @change="genderChange">
              <label class="radio"
                ><radio
                  value="1"
                  color="#00acac"
                  :checked="userInfo.sex == '1' ? true : false"
                />男</label
              >
              <label class="radio second"
                ><radio
                  value="0"
                  color="#00acac"
                  :checked="userInfo.sex == '0' ? true : false"
                />女</label
              >
            </radio-group>
          </view>
        </view>
      </view>
      <view class="info-item">
        <view class="contacts">
          <text class="name">生日</text>
          <picker
            class="value"
            mode="date"
            :value="userInfo.birthday"
            start="1900-01-01"
            @change="bindDateChange"
          >
            <view class="picker">{{
              userInfo.birthday ? userInfo.birthday : "选择生日"
            }}</view>
          </picker>
        </view>
      </view>
    </view>
    <!-- 底部操作按钮 -->
    <view class="footer-fixed" v-if="userInfo.id">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" @click="save()">保存信息</view>
      </view>
      <view class="btn-wrapper">
        <view class="btn-item btn-item-out" @click="logout()">退出登录</view>
      </view>
    </view>
  </view>
</template>

<script>
import * as UserApi from "@/api/user";
import * as UploadApi from "@/api/upload";
import store from "@/store";
import keyWords from "@/components/bian-keywords/index.vue";
export default {
  components: {
    keyWords,
  },
  data() {
    return {
      //当前页面参数
      options: {},
      // 正在加载
      isLoading: true,
      userInfo: { avatar: "", name: "", sex: 0, birthday: "", hasPassword: "" },
      openCardPara: null,
      code: "",
      nickname: "",
      avatar: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 当前页面参数
    this.options = options;
    this.getUserInfo();
  },

  methods: {
    /**
     * 用户信息
     * */
    getUserInfo() {
      const app = this;
      app.isLoading = true;
      UserApi.info().then((result) => {
        app.userInfo = result.data.userInfo;
        if (result.data.openCardPara) {
          app.openCardPara = result.data.openCardPara;
        }
        app.nickname = app.userInfo.name;
        app.avatar = app.userInfo.avatar;
        app.isLoading = false;
      });
    },
    bindDateChange(e) {
      let that = this;
      that.userInfo.birthday = e.detail.value;
    },
    getnickname(e) {
      this.nickname = e.detail.value;
    },
    genderChange(e) {
      this.userInfo.sex = e.detail.value;
    },
    /**
     * 获取会员手机
     * */
    getPhoneNumber(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        this.onAuthSuccess(e);
      }
    },
    getCode(e) {
      const app = this;
      return new Promise((resolve, reject) => {
        uni.login({
          provider: "weixin",
          success: (res) => {
            e.detail.code = res.code;
            UserApi.save(e.detail).then((result) => {
              app.userInfo.mobile = result.data.mobile;
            });
            resolve(res.code);
          },
          fail: reject,
        });
      });
    },
    onAuthSuccess(e) {
      this.getCode(e);
    },
    // 修改密码
    changePassword() {
      this.$navTo(
        "pages/user/password?hasPassword=" + this.userInfo.hasPassword
      );
      console.log(this.userInfo.hasPassword);
    },
    // 选择图片
    chooseImage() {
      const app = this;
      // 选择图片
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success({ tempFiles }) {
          const imageList = tempFiles;
          return new Promise((resolve, reject) => {
            if (imageList.length > 0) {
              UploadApi.image(imageList)
                .then((files) => {
                  if (files && files.length > 0) {
                    app.userInfo.avatar = files[0].fileName;
                    app.avatar = files[0].domain + app.userInfo.avatar;
                  }
                  resolve(files);
                })
                .catch((err) => reject(err));
            } else {
              resolve();
            }
          });
        },
      });
    },
    /**
     * 保存个人信息
     */
    save() {
      const app = this;
      app.isLoading = true;
      UserApi.save({
        name: app.nickname,
        avatar: app.avatar,
        sex: app.userInfo.sex,
        birthday: app.userInfo.birthday,
      })
        .then((result) => {
          app.userInfo = result.data;
          app.isLoading = false;
          app.$success("保存成功！");
        })
        .catch((err) => {
          app.isLoading = false;
        });
    },

    /**
     * 退出登录
     */
    logout() {
      store.dispatch("Logout");
      this.$navTo("pages/user/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.info-list {
  padding-bottom: 100rpx;
  margin-top: 25rpx;
}

// 项目内容
.info-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 40rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
  .avatar-warp {
    line-height: 120rpx;
  }
}

.contacts {
  font-size: 30rpx;
  .name {
    margin-left: 0px;
  }
  .value {
    float: right;
    color: #999999;
    text-align: right;
    .second {
      margin-left: 0.6rem;
    }
  }
  .password {
    text-align: right;
    float: left;
    padding-right: 5rpx;
  }
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 120rpx;
    border: solid 1px #cccccc;
    float: right;
  }
}
.item-option {
  display: flex;
  justify-content: space-between;
  height: 48rpx;
}

// 底部操作栏
.footer-fixed {
  height: 100rpx;
  z-index: 11;
  .btn-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    border-radius: 40rpx;
  }

  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);
  }
  .btn-item-out {
    margin-top: 20rpx;
    background: #ffffff;
    border: 1px solid $fuint-theme;
    color: #666666;
  }
}
</style>
